'use client'

import Image from 'next/image'
import { useState } from 'react'
import Lightbox, { Slide } from 'yet-another-react-lightbox'
import 'yet-another-react-lightbox/styles.css'
import Video from 'yet-another-react-lightbox/plugins/video'

import videoIcon from '@/public/video_white.png'

interface PictureGridProps {
  images: string[]
  videos: string[]
  videoThumbs: string[]
}

const PictureGrid: React.FC<PictureGridProps> = (props) => {
  const { images, videos, videoThumbs } = props

  // Gallery 显示的图片
  const lightboxImages = images.map((item) => ({ src: item })) as Slide[]
  // Gallery 显示的视频
  const lightboxVideos = videos.map((item, index) => {
    return {
      type: 'video',
      poster: videoThumbs[index],
      sources: [
        {
          src: item,
          type: 'video/mp4',
        },
      ],
    }
  }) as Slide[]
  // Gallery 显示的数据
  const lightboxList = [...lightboxImages, ...lightboxVideos]

  // 当前选中项的index
  const [selected, setSelected] = useState(0)
  // 是否打开 Gallery
  const [isOpenGallery, setIsOpenGallery] = useState(false)

  const gridIndexList = [0, 1, 2, 3, 4, 5]
  const gridImageClasses = [
    'relative bg-gray-100 col-span-11 row-span-8 cursor-pointer',
    'relative bg-gray-100 col-span-7 row-span-4 cursor-pointer',
    'relative bg-gray-100 col-span-7 row-span-4 cursor-pointer',
    'relative bg-gray-100 col-span-6 row-span-4 cursor-pointer',
    'relative bg-gray-100 col-span-6 row-span-4 cursor-pointer',
    'relative bg-gray-100 col-span-6 row-span-4 cursor-pointer',
  ]

  // 点击图片时触发
  const handleTapImage = (index: number) => {
    setSelected(index)
    setIsOpenGallery(true)
  }

  // 根据 Index 获取对应的图片或视频
  const getMediaItemByIndex = (index: number) => {
    if (index < images.length) {
      return {
        src: images[index],
        type: 'image',
      }
    } else {
      return {
        src: videoThumbs[images.length - index],
        type: 'video',
      }
    }
  }

  return (
    <>
      <div className='grid grid-flow-row grid-cols-18 grid-rows-12 gap-2 w-pictureGrid h-pictureGrid lg:max-w-[960px] lg:h-[35.125rem] lg:gap-3 2xl:max-w-[1200px] 2xl:h-[52.6875rem] 2xl:gap-[1.125rem]'>
        {gridIndexList.map((index) => {
          return (
            <div
              key={index}
              className={gridImageClasses[index]}
              onClick={() => handleTapImage(index)}
            >
              <div className='z-10 absolute top-0 left-0 bottom-0 right-0'>
                <Image
                  src={getMediaItemByIndex(index).src}
                  alt='picture'
                  fill
                  style={{ objectFit: 'cover' }}
                  sizes='(max-width: 1024px) 56vw, 37vw'
                />
              </div>
              {getMediaItemByIndex(index).type === 'video' && (
                <div className='z-20 absolute top-0 left-0 bottom-0 right-0 bg-black bg-opacity-45'>
                  <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[1.3125rem] h-[0.875rem] lg:w-[3.1875rem] lg:h-[2.0625rem]'>
                    <Image src={videoIcon} alt='video icon' fill sizes='6vw' />
                  </div>
                </div>
              )}
            </div>
          )
        })}
      </div>
      <Lightbox
        open={isOpenGallery}
        close={() => setIsOpenGallery(false)}
        index={selected}
        plugins={[Video]}
        slides={lightboxList}
      />
    </>
  )
}

export default PictureGrid
